<template>
  <div >
    <h1>项目名称</h1>
  <p>这是一个简单的项目介绍网页。</p>
  
  <h2>项目概述</h2>
  <p>前端使用vue3+element plus，字体图标采用了阿里图标库 后端使用nodejs搭建 使用了express框架+Sequelize框架+mysql 部署在华为云服务器</p>
  
  <h2>项目功能</h2>
  <ul>
    <li>功能一：发布文章</li>
    <li>功能二：查看文章</li>
    <li>功能三：点赞文章</li>
    <li>功能四：评论文章</li>
    <li>功能五：查看自己发布了那些文章</li>
    <li>功能四：修改自己的个人信息</li>
  </ul>
  
  <h2>项目截图</h2>
  <img src="https://ruan-cso-1318331856.cos.ap-guangzhou.myqcloud.com/2N%60OB2~U0%5DG%7D4T%25G%60_FOFDW.png" alt="项目截图">
  <img src="https://ruan-cso-1318331856.cos.ap-guangzhou.myqcloud.com/K%7D70%25P%24C%5D)SY%5B%5D~%60RSU79%24H.png" alt="">
  <h2>团队成员</h2>
  <ul>
    <li>成员一：ruan</li>

  </ul>
  </div>
</template>

<script setup>
import { ref, reactive,onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
onMounted(() => {
  //console.log('3.-组件挂载到页面之后执行-------onMounted')
})
</script>
<style scoped lang='css'>
  body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
    }
    
    h1 {
      color: #333;
    }
    
    p {
      color: #666;
      line-height: 1.5;
    }
    
    img {
      max-width: 100%;
      height: auto;
    }
</style>